<template>
  <div class="page-container index-container">

    <div class="m-GenBox evaluate-main wdfx">

		<div class="searchBox clearfix">
			<div class="condition">
				<el-select v-model="wdfx.value1" class="genSelect item mr20 w150" placeholder="请选择年度">
				<el-option
					v-for="item in options5"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
				</el-select>
			</div>

			<div class="condition">
				<el-select v-model="wdfx.value2" class="genSelect item mr20 w150" placeholder="请选择全部学段">
				<el-option
					v-for="item in options3"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
				</el-select>
			</div>

			<div class="condition">
				<el-select v-model="wdfx.value3" class="genSelect item mr20 w150" placeholder="请选择学校">
				<el-option
					v-for="item in options4"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				></el-option>
				</el-select>
			</div>

			<div class="condition">
				<el-button type="primary">查询</el-button>
			</div>
		</div>

		<div class="clearfix pdt30 gen-row">
				
				<div class="l-genBox gen-shadow u-flex_col">
					<div class="tit">学业负担指数表</div>
                    <div class="u-flex ofh">
						<el-table
						:data="tableData"
						height="480px"
						style="width: 100%"
						:header-cell-style="{background:'#f4f5f9',fontSize:'16px',color:'#747e93',textAlign:'center',height:'50px'}"
						:cell-style="{textAlign:'center',height:'58px',fontSize:'16px',color:'#333333'}"
						>
						<el-table-column prop="name" label="评价内容" width="180"></el-table-column>
						<el-table-column prop="num" label="指数" width="180"></el-table-column>
						<el-table-column prop="key" label="均衡系数"></el-table-column>
						</el-table>
                    </div>
				</div>

				<div class="r-genBox gen-shadow u-flex_col">
					<div class="tit">学业负担指数与均衡系数散点图</div>
					<div class="u-flex ofh" style="padding:0 40px 20px 20px;">
						<u-scatterEchart 
							:keyId="'third1'" 
							:legend="sdmapList1" :list="sdmapValueList1" :yAxisName="'均衡系数'" :xAxisName="'指数'" 
							:yMax='1' :xMax='5' :yMin='0' :xMin='1' :markVal="{y:0.5,x:4.1}" hasDiff>
						</u-scatterEchart>
					</div>
				</div>


				<!-- <div class="contentbox">
				<div class="leftbox">
					<div class="l-genBox u-flex_col">
					<div class="tname">区学业负担指数表</div>
					<div class="u-flex ofh">
						<el-table
						:data="tableData"
						height="480px"
						style="width: 100%"
						:header-cell-style="{background:'#f4f5f9',fontSize:'16px',color:'#747e93',textAlign:'center',height:'50px'}"
						:cell-style="{textAlign:'center',height:'58px',fontSize:'16px',color:'#333333'}"
						>
						<el-table-column prop="name" label="评价内容" width="180"></el-table-column>
						<el-table-column prop="num" label="指数" width="180"></el-table-column>
						<el-table-column prop="key" label="均衡系数"></el-table-column>
						</el-table>
					</div>
					</div>
				</div>
				<div class="rightbox">
					<div class="tname">标题xxx?</div>
				</div>
				</div> -->

		</div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
		active: 0,
		value1: "0",
		value2: "1",
		xxfx: {
			value0:"1",
			value1: "",
			value2: "",
			value3: ""
		},
		wdfx: {
		value1: "",
		value2: "",
		value3: ""
		},
		options3: [
			{
				value: "1",
				label: "一年级"
			},
			{
				value: "2",
				label: "二年级"
			},
			{
				value: "3",
				label: "三年级"
			},
			{
				value: "4",
				label: "四年级"
			},
			{
				value: "5",
				label: "五年级"
			},
			{
				value: "6",
				label: "六年级"
			}
		],
		options4: [
			{
				value: "1",
				label: "义鹏第一小学"
			},
			{
				value: "2",
				label: "天音幸福小学"
			},
			{
				value: "3",
				label: "金沙湖东方校区"
			},
			{
				value: "4",
				label: "启明中学"
			},
			{
				value: "5",
				label: "明珠小学"
			}
		],
		options5: [
			{
				value: "1",
				label: "2020年"
			},
			{
				value: "2",
				label: "2019年"
			},
			{
				value: "3",
				label: "2018年"
			},
			{
				value: "4",
				label: "2017年"
			},
			{
				value: "5",
				label: "2016年"
			}
		],
		tableData: [
			{
				name: "总体",
				num: "4.12",
				key: "3.52"
			},
			{
				name: "课外辅导",
				num: "2.63",
				key: "4.61"
			},
			{
				name: "试题难度",
				num: "5.00",
				key: "4.91"
			},
			{
				name: "教辅材料",
				num: "3.16",
				key: "3.53"
			},
			{
				name: "副科重视",
				num: "4.41",
				key: "4.50"
			},
			{
				name: "学习压力",
				num: "2.16",
				key: "3.90"
			},
			{
				name: "学习方法",
				num: "1.41",
				key: "2.53"
			}
		],
    	searchPar: {
			value1: "",
			value2: "",
			value3: "",
			value4: ""
		},
		cardList: [
			{
			title: "教育局关于中小学信息化发展状况调研报告",
			time: "2020.11.15"
			},
			{
			title: "教师证上传",
			time: "2020.11.16"
			},
			{
			title: "上学期考试难度调查报告",
			time: "2020.11.16"
			},
			{
			title: "上学期考试难度调查报告",
			time: "2020.11.16"
			},
			{
			title: "上学期考试难度调查报告",
			time: "2020.11.16"
			}
		],
		sdmapList1:[
			{name:'钱塘新区',key:1,color:'#4ca0ff'},
			{name:'学校',color:'#00cd86'},
		],
		sdmapValueList1:[
			{name:"钱塘新区",key:1,value:[[4.1,0.5]]},
			{name:"学习方法",value:[[1.5,0.5]]},
			{name:"学习压力",value:[[2.3,0.9]]},
			{name:"课外指导",value:[[2.5,0.6]]},
			{name:"试题难度",value:[[3,0.9]]},
			{name:"教辅材料",value:[[3.1,0.5]]},
			{name:"副科重视",value:[[4.5,0.5]]},
		],
    }
  },
    methods: {
		searchFun() {
			if (this.searchPar.value1 == 1) {
				this.cardList = [
				{
					title: "教育局关于中小学信息化发展状况调研报告",
					time: "2020.11.15"
				},
				{
					title: "教师证上传",
					time: "2020.11.16"
				},
				{
					title: "上学期考试难度调查报告",
					time: "2020.11.16"
				},
				{
					title: "上学期考试难度调查报告",
					time: "2020.11.16"
				},
				{
					title: "上学期考试难度调查报告",
					time: "2020.11.16"
				}
				];
			} else {
				this.cardList = [];
			}
		},
		trans1(){
			this.active=0
		},
		trans2(){
			this.active=1
		},
		trans3(){
			this.active=2
		},
		trans4(){
			this.active=3
		},
		trans5(){
			this.active=4
		},
		trans6(){
			this.active=5
		}
    }
  }
</script>

<style lang="scss" scoped>
.evaluate-main {
  padding: 0 40px;
}
.u-cardBox {
  box-shadow: 0 0 10px rgba($color: #3b64a8, $alpha: 0.1);
}
.gk,.lscy,.wjxq,.xxfx,.wdfx,.fxbg{
    padding-top:30px !important;
}
.l-genBox{
    float: left;
    width: 460px;
    height: 450px;
    margin-right: 24px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.r-genBox{
    height: 450px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.l-genBox,.r-genBox{
    .tit{
        width: 100%;
        padding: 20px 30px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
    }
}
</style>
<style lang="scss" scoped>
.wdfx {
  .evaluate-box {
    width: 100%;
    height: 680px;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    .contentbox {
      width: 100%;
      height: 100%;
      flex: 1;
      .leftbox {
        width: 465px;
        height: 100%;
        float: left;
        .tname {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 30px;
        }
        .el-table {
          &::before {
            content: "";
            height: 0;
          }
        }
        .el-table__body {
          tr:last-child {
            td {
              border: 0;
            }
          }
        }
      }
      .rightbox {
        width: 745px;
        height: 100%;
        float: right;
        .tname {
          font-size: 18px;
          color: #333333;
          font-weight: bold;
          margin-bottom: 30px;
        }
      }
    }
  }
}
</style>
